<section class="content">
  <div class="row">
    <!--个人组合列表Begin-->
    <div class="col-md-3">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">个人组合</h3>
          <div class="box-tools pull-right hide">
            <select name="modelsSelector" id="modelsSelector" class="form-control">
              <option value="interbank">银行间</option>
            </select>
          </div>
          <div class="box-tools pull-right">
            <div class="has-feedback">
              <input type="text" class="form-control input-sm">
              <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
          </div>
        </div>
        <div class="box-body no-padding">
          <div class="mailbox-controls">
            <button type="button" class="btn btn-default btn-sm" (click)="queryModelFundFavoriteList()" alt="刷新"
                    title="刷新"><i class="fa fa-refresh"></i></button>
            <button type="button" class="btn btn-default btn-sm" (click)="openAddFundFavoriteModal()" alt="新增"
                    title="新增"><i class="fa fa-plus"></i></button>
          </div>
          <div class="table-responsive mailbox-messages scroll-box">
            <table class="table table-hover table-striped" #fundFavoriteListRef>
              <tbody>
              <tr>
                <td>分类名</td>
                <td>操作</td>
              </tr>
              <tr *ngFor="let item of fundFavoriteFilterList; let index =index;"
                  [attr.data-index]="index">
                <td
                  [class.active-favorite]="activedFavoriteId === item.objid"
                  (click)="queryFundFavoriteDetailList(item.objid, item.objname)">
                  {{item.objname}}
                </td>
                <td>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default btn-sm" alt="修改" title="修改"
                            (click)="openModifyFundFavoriteModal(item)">
                      <i class="fa fa-edit"></i></button>
                  </div>
                  <div class="btn-group" (click)="openDeleteFundFavoriteConfirmModal(item.objid, item.objname)">
                    <button type="button" class="btn btn-default btn-sm" alt="删除" title="删除"><i
                      class="fa fa-trash-o"></i></button>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <!--个人组合列表列表分页Begin-->
          <div class="box-footer clearfix">
            <app-pagination
              [currentPageNum]="fundFavoriteListPageInfo.currentPageNum"
              [pagesShow]="fundFavoriteListPageInfo.pagesShow"
              [totalPages]="fundFavoriteListPageInfo.totalPages"
              (pageChanged)="fundFavoriteListPageNavigation($event)">
              <div class="pull-left pagination-detail" data-pagination-additional="true">
            <span class="pagination-info">
              总共{{fundFavoriteListPageInfo.total}}条
            </span>
                <span class="page-list"><span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{fundFavoriteListPageInfo.pageSize}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of fundFavoriteListPageInfo.pageList" role="menuitem"
                    [class.active]="fundFavoriteListPageInfo.pageSize === i"
                    (click)="fundFavoriteListPageSizeChange(i)">
                  <a href="javascript:void(0)">{{i}}</a>
                </li>
                </ul>
            </span> 条每页</span>
              </div>
            </app-pagination>
          </div>
          <!--个人组合列表分页End-->
        </div>
      </div>
    </div>
    <!--个人组合列表End-->
    <!--分组基金Begin-->
    <div class="col-md-4">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">分组基金</h3>
          <div class="box-tools pull-right">
            <div class="has-feedback">
              <input type="text" class="form-control input-sm">
              <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
          </div>
          <h5>当前分组名：<span class="text-green">{{activedFavoriteName}}</span></h5>
        </div>
        <div class="box-body no-padding">
          <div class="mailbox-controls hide">
            <div class="btn-group">
              <button type="button" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></button>
            </div>
            <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
          </div>
          <div class="table-responsive mailbox-messages scroll-box">
            <table class="table table-hover table-striped" #fundFavoriteDetailListRef>
              <tbody>
              <tr>
                <td>
                  <input type="checkbox" data-select-all="true" data-index="index"
                         (click)="toggleSelectAll(fundFavoriteDetailListRef)">
                </td>
                <td>
                  组合代码
                </td>
                <td>
                  组合名称
                </td>
              </tr>
              <tr
                *ngFor="let item of fundFavoriteDetailFilterList; let index = index;"
                [attr.data-index]="index"
              >
                <td><input type="checkbox" data-select-one="true"></td>
                <td>{{item.fundcode}}</td>
                <td>{{item.fundname}}</td>
              </tr>
              </tbody>
            </table>
          </div>
          <!--分组基金列表分页Begin-->
          <div class="box-footer clearfix">
            <app-pagination
              [currentPageNum]="fundFavoriteDetailListPageInfo.currentPageNum"
              [pagesShow]="fundFavoriteDetailListPageInfo.pagesShow"
              [totalPages]="fundFavoriteDetailListPageInfo.totalPages"
              (pageChanged)="fundFavoriteDetailListPageNavigation($event)">
              <div class="pull-left pagination-detail" data-pagination-additional="true">
            <span class="pagination-info">
              总共{{fundFavoriteDetailListPageInfo.total}}条
            </span>
                <span class="page-list"><span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{fundFavoriteDetailListPageInfo.pageSize}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of fundFavoriteDetailListPageInfo.pageList" role="menuitem"
                    [class.active]="fundFavoriteDetailListPageInfo.pageSize === i"
                    (click)="fundFavoriteDetailListPageSizeChange(i)">
                  <a href="javascript:void(0)">{{i}}</a>
                </li>
                </ul>
            </span> 条每页</span>
              </div>
            </app-pagination>
          </div>
          <!--分组基金列表分页End-->
        </div>
      </div>
    </div>
    <!--分组基金End-->
    <!--穿梭按钮区域Begin-->
    <div class="col-md-1" style="padding-top: 60px;">
      <button type="button" class="btn btn-sm btn-default btn-block"
              [disabled]="!fundList || fundList.length <= 0"
              (click)="addFundListDetailToFavoriteDetail()">
        <i class=" fa fa-lg fa-angle-double-left"></i>
      </button>
      <button type="button" class="btn btn-sm btn-default btn-block" style="margin-top:20px;"
              [disabled]="!fundFavoriteList || fundFavoriteList.length <= 0"
              (click)="deleteFundFavoriteDetailToFundList()">
        <i class=" fa fa-lg fa-angle-double-right"></i>
      </button>
    </div>
    <!--穿梭按钮区域End-->
    <!--当前用户权限下的所有分组列表Begin-->
    <div class="col-md-4">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">可分组基金</h3>
          <div class="box-tools pull-right">
            <div class="has-feedback">
              <input type="text" class="form-control input-sm">
              <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
          </div>
          <h5>当前分组名：<span class="text-green">{{activedFavoriteName}}</span></h5>
        </div>
        <div class="box-body no-padding">
          <div class="table-responsive mailbox-messages scroll-box">
            <table class="table table-hover table-striped" #fundListRef>
              <tbody>
              <tr>
                <td>
                  <input type="checkbox" data-select-all="true" (click)="toggleSelectAll(fundListRef)">
                </td>
                <td>
                  组合代码
                </td>
                <td>
                  组合名称
                </td>
              </tr>
              <tr
                *ngFor="let item of fundFilterList; let index = index;"
                [attr.data-index]="index"
              >
                <td>
                  <input type="checkbox" data-select-one="true" data-index="index">
                </td>
                <td>{{item.fundcode}}</td>
                <td>{{item.fundname}}</td>
              </tr>
              </tbody>
            </table>
          </div>
          <!--当前用户权限下的所有分组列表分页Begin-->
          <div class="box-footer clearfix">
            <app-pagination
              [currentPageNum]="fundListPageInfo.currentPageNum"
              [pagesShow]="fundListPageInfo.pagesShow"
              [totalPages]="fundListPageInfo.totalPages"
              (pageChanged)="fundListPageNavigation($event)">
              <div class="pull-left pagination-detail" data-pagination-additional="true">
            <span class="pagination-info">
              总共{{fundListPageInfo.total}}条
            </span>
                <span class="page-list"><span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{fundListPageInfo.pageSize}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of fundListPageInfo.pageList" role="menuitem"
                    [class.active]="fundListPageInfo.pageSize === i"
                    (click)="fundListPageSizeChange(i)">
                  <a href="javascript:void(0)">{{i}}</a>
                </li>
                </ul>
            </span> 条每页</span>
              </div>
            </app-pagination>
          </div>
          <!--当前用户权限下的所有分组列表分页End-->
        </div>
      </div>
    </div>
    <!--当前用户权限下的所有分组列表End-->

    <!--新增个人组合分类模态框Begin-->
    <div class="modal" id="addFundFavoriteModal" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" (click)="closeAddFundFavoriteModal()">
              <span aria-hidden="true">×</span></button>
            <h4 class="modal-title">新增个人组合分类</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="box-body no-padding">
                <div class="form-group hide">
                  <label class="col-sm-2 control-label">模块：</label>
                  <div class="col-sm-10">
                    {{activedModelName}}
                  </div>
                </div>
                <div class="form-group">
                  <label for="objname" class="col-sm-2 control-label">分类名称：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control close-clear" id="objname" name="objname"
                           [(ngModel)]="addFundFavoriteModalData.objname">
                  </div>
                </div>
                <div class="form-group">
                  <label for="sort" class="col-sm-2 control-label">排序：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control close-clear" id="sort" name="sort"
                           [(ngModel)]="addFundFavoriteModalData.sort">
                  </div>
                </div>
                <div class="form-group">
                  <label for="remark" class="col-sm-2 control-label">备注：</label>
                  <div class="col-sm-10">
                    <textarea class="form-control close-clear" id="remark" name="remark" cols="40" rows="10"
                              [(ngModel)]="addFundFavoriteModalData.remark"></textarea>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal"
                    (click)="closeAddFundFavoriteModal()">取消
            </button>
            <button type="button" class="btn btn-primary" (click)="insertFundFavorite()">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!--新增个人组合分类模态框End-->

    <!--修改个人组合分类模态框Begin-->
    <div class="modal" id="modifyFundFavoriteModal" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" (click)="closeModifyFundFavoriteModal()">
              <span aria-hidden="true">×</span></button>
            <h4 class="modal-title">修改个人组合分类</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="box-body no-padding">
                <div class="form-group hide">
                  <label class="col-sm-2 control-label">模块：</label>
                  <div class="col-sm-10">
                    {{activedModelName}}
                  </div>
                </div>
                <div class="form-group">
                  <label for="objname" class="col-sm-2 control-label">分类名称：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control close-clear" id="objname" name="objname"
                           [(ngModel)]="modifyFundFavoriteModalData.objname">
                  </div>
                </div>
                <div class="form-group">
                  <label for="sort" class="col-sm-2 control-label">排序：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control close-clear" id="sort" name="sort"
                           [(ngModel)]="modifyFundFavoriteModalData.sort">
                  </div>
                </div>
                <div class="form-group">
                  <label for="remark" class="col-sm-2 control-label">备注：</label>
                  <div class="col-sm-10">
                    <textarea class="form-control close-clear" id="remark" name="remark" cols="40" rows="10"
                              [(ngModel)]="modifyFundFavoriteModalData.remark"></textarea>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal"
                    (click)="closeModifyFundFavoriteModal()">取消
            </button>
            <button type="button" class="btn btn-primary" (click)="updateFundFavorite()">更新</button>
          </div>
        </div>
      </div>
    </div>
    <!--修改个人组合分类模态框End-->
  </div>
</section>
